﻿@using WebIG.Data
@model WebIG.Data.Feed
@{
    ViewBag.Title = "Media";
    Layout = "~/Views/Shared/_Layout.cshtml";

    if (Model.Location != null)
    {
        ViewBag.Latitude = Model.Location.Latitude;
        ViewBag.Longitude = Model.Location.Longitude;
    }
    else
    {
        ViewBag.Latitude = 0;
        ViewBag.Longitude = 0;
    }
}

<div class="lphoto">
    <div class="lphoto-img">
        <img src="@Model.Images.StandardResolution.Url" style="width: 640px;height: 640px;" />
    </div>
    <div class="lphoto-info">
        <div class="lphoto-info-user">
            <div style="float: left;padding-top: 5px;">
                <img src="@Model.User.ProfilePicture" style="width: 40px;height: 40px;" />
            </div>
            <div style="margin-left: 50px">
                <div style="height: 22px;line-height: 22px;">
                    <a href="@Url.Action("User", new { Model.User.Id })">@Model.User.FullName</a>
                    <button class="btn btn-primary btn-xs">Following</button>
                </div>
                <div>
                    <span class="glyphicon glyphicon-time"></span>&nbsp;<span>@Utility.GetDateTime(Model.CreatedTime)</span>
                    @if (Model.Location != null && Model.Location.Name != null)
                    {
                        <span class="glyphicon glyphicon-map-marker"></span> <span>@Model.Location.Name</span>
                    }
                </div>
            </div>
        </div>
        <div class="lphoto-info-title">
            @if (Model.Caption != null)
            {
                <span title="@Model.Caption.Text">@Model.Caption.Text</span>
            }
        </div>
        <div class="lphoto-info-likes">
            @if (Model.Likes.Count > 0)
            {
                <span class="glyphicon glyphicon-heart"></span>
                for (int i = 0; i < Model.Likes.Data.Count(); i++)
                {
                    @Html.ActionLink(Model.Likes.Data[i].FullName, "User", new { Model.Likes.Data[i].Id })
                    if (i != 2 && i != Model.Likes.Count - 1)
                    {
                        <span>,</span>
                    }
                }

                if (Model.Likes.Count > 3)
                {
                    <span>and all @Model.Likes.Count users like this.</span>
                }
            }
        </div>
        <div class="lphoto-info-comment">
            @foreach (var comment in Model.Comments.Data)
            {
                <div style="clear: both;">
                    <div style="float: left;padding: 4px 0;"><img src="@comment.From.ProfilePicture" style="width: 32px;height: 32px;" /></div>
                    <div style="margin-left: 45px;">
                        <div>@Html.ActionLink(comment.From.UserName, "User", new { comment.From.Id })</div>
                        <div>@comment.Text</div>
                    </div>
                </div>
            }
        </div>
        <div class="lphoto-info-bar ">
            <div class="input-group">
                <span class="input-group-btn">
                    @if (Model.UserHasLiked)
                    {
                        <button id="btnLike" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span></button>
                    }
                    else
                    {
                        <button id="btnLike" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart-empty"></span></button>
                    }
                </span>
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-comment"></span></button>
                </span>
            </div>
        </div>
        @if (Model.Location != null)
        {
            <div class="lphoto-info-map">
                <div id="map-canvas" style="width: 100%; height: 100%;"></div>
            </div>
        }
    </div>
</div>

@section scripts
{
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCM2VeI-ypm5YJ7rXGTPimKXBkYgLBrbQ4&sensor=true">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            //$(".lphoto-info-comment").css("top", $(".lphoto-info-user").height() + $(".lphoto-info-title").height() + $(".lphoto-info-likes").height() + 12);

            $("#btnLike").click(function () {
                if ($("#btnLike span").hasClass("glyphicon-heart")) {
                    $.post("@Url.Action("DelMediaLike")", { "mediaId": "@Model.Id" }, function () {
                        $("#btnLike span").removeClass("glyphicon-heart").addClass("glyphicon-heart-empty");
                    });
                } else {
                    $.post("@Url.Action("SetMediaLike")", { "mediaId": "@Model.Id" }, function () {
                        $("#btnLike span").removeClass("glyphicon-heart-empty").addClass("glyphicon-heart");
                    });
                }
            });

            console.log($(".lphoto-info-map").length);
            if ($(".lphoto-info-map").length == 0) {
                $(".lphoto-info-bar").css("bottom", "0px");
                $(".lphoto-info-comment").css("bottom", "40px");
            } else {
                google.maps.event.addDomListener(window, 'load', function () {
                    var location = new google.maps.LatLng("@ViewBag.Latitude", "@ViewBag.Longitude");

                    var mapOptions = {
                        zoom: 12,
                        center: location
                    };

                    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    var marker = new google.maps.Marker({
                        position: location,
                    });

                    marker.setMap(map);
                });
            }
        });
    </script>
}

